#{extends 'main.html' /}
#{set title:'Home' /}

<body>
<!--- Header Start--->
<div class="head">
        <div id="dark">
                    <a class="large button orange"> Home </a>
                    <a class="large button orange about"> About Us </a>
         </div>
	<div id="light" style="margin: -66px 0px 0px -880px">
		<a class="large button orange" href="#mydiv" rel="facebox"> Log in </a>
	</div>
</div>
<!-- End of Head -->

<div id="mydiv" style="display:none">
	<p>
		<label for="username" style="font-size:12px;">Username</label>
		<input type="text" name="username" value="" id="username">
	</p>
	<p>
		<label for="password" style="font-size:12px;">Password&nbsp;</label>
		<input type="password" name="password" value="" id="password">
	</p>
</div><!-- End of My Div -->

<div id="content">
  <div id="header">
     <p>To close the slide, click anywhere on the screen. Only one slide can be open at a time.</p>
  </div>
  <ul>
    <li><a href="/public/_left.html" id="slide-right">PageSlide from the Left</a></li>
  </ul>
</div>
<!-- End of Content -->
<!-- Yabe Content-->

#{if frontPost}

    #{display post:frontPost, as:'home' /}

    #{if olderPosts.size()}

        <div class="older-posts">
            <h3>Older posts <span class="from">from this blog</span></h3>

            #{list items:olderPosts, as:'oldPost'}
                #{display post:oldPost, as:'teaser' /}
            #{/list}
        </div>

    #{/if}

#{/if}

#{else}
    <div class="empty">
        There is currently nothing to read here.
    </div>
#{/else}

<!--- End Yabe-->


<script src="/public/javascripts/jquery.pageslide.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
    jQuery(document).ready(function($) {
        $('a[rel*=facebox]').facebox()
    });
    $(function(){ $("label").inFieldLabels(); });
        $("#slide-right").pageSlide({ width: "350px", direction: "left" });
    $("#slide-right").pageSlide({ width: "350px", direction: "right" });
</script>